import { Scatter } from '@ant-design/plots';
import { Card, Radio } from 'antd';
import numeral from 'numeral';
import { useMemo, useState } from 'react';
// import { useState } from 'react';
// 属性类型
type PropField = {
  title: string;
  datas: API.DeptJfData[];
  height: number;
};
const DeptYcppFx: React.FC<PropField> = (props) => {
  const [itemType, setItemType] = useState(1);
  const config = useMemo(() => {
    const rows: Record<string, any>[] = [];
    props.datas
      .sort((a, b) => (itemType === 1 ? b.kpi - a.kpi : b.zyHbl - a.zyHbl))
      .forEach((item) => {
        rows.push({
          name: item.dpnm.replaceAll('支行', '').replaceAll('小微', '').replaceAll('团队', ''),
          KPI: item.kpi,
          资源回报率: item.zyHbl,
        });
      });
    const conf = {
      data: rows,
      xField: 'KPI',
      yField: '资源回报率',
      colorField: 'steelblue',
      autoFit: true,
      scale: {
        x: { nice: true },
        y: { nice: true },
      },
      label: {
        text: 'name',
        style: {
          stroke: '#fff',
          textAnchor: 'start',
          textBaseline: 'middle',
          dx: 10,
          position: 'left',
          fontSize: 10,
          lineWidth: 2,
        },
      },
      axis: {
        x: { title: 'KPI得分', tickCount: 24 },
        y: { title: '资源回报率', grid: true },
      },
      tooltip: { channel: 'y', valueFormatter: (d: number) => numeral(d).format('0,0.00') },
    };
    return conf;
  }, [props.datas, itemType]);
  return (
    <Card
      size="small"
      title={props.title}
      extra={
        <Radio.Group
          value={itemType}
          size="small"
          onChange={(e) => setItemType(Number(e.target.value))}
        />
      }
      bodyStyle={{ padding: '0px', height: (props.height - 60) / 2 + 70 }}
    >
      <Scatter {...config} />
    </Card>
  );
};

export default DeptYcppFx;
